<!--
 * @Description: 二维码管理
 * @Author: py
 * @Date: 2025-1-15
-->
<script setup lang="ts" name="qrcode-list">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchTable } from '@fl/components'
import QrcodeDialog from './components/qrcode-dialog.vue'
import { cloneDeep } from 'lodash-es'
import { qrcodeListApi } from '@fl/api/advertising-api'

const isShowDialog = ref<boolean>(false)
const detailId = ref<number | string>('')
const detailData = ref<any>({})

const initialState = {
    chatName: '',
}

const queryForm = ref({
    ...initialState,
})

const gridOptions = reactive<VxeGridProps>({
    border: true,
    columns: [
        { title: '序号', type: 'seq', width: 60 },
        { field: 'chatName', title: '群聊名称' },
        { slots: { default: 'qrcodePic' }, title: '群聊二维码' },
        { slots: { default: 'chatBg' }, title: '主题背景' },
        { field: 'chatType', title: '类型' },
        { field: 'activeCount', title: '群聊活跃描述' },
        { field: 'remark', title: '备注' },
        // { slots: { default: 'status' }, title: '状态', width: 130 },
        { slots: { default: 'operate' }, title: '操作', width: 95 },
    ],
    minHeight: 370,
    // showOverflow: false,
})

const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})

const isLoading = ref(false)
const tableData = ref([])

function getList() {
    isLoading.value = true

    const oParams = {
        pageNo: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
        ...queryForm.value,
    }
    qrcodeListApi(oParams).then((res) => {
        const { rows, total } = res
        tablePage.value.total = total
        tableData.value = rows
    }).finally(() => {
        isLoading.value = false
    })
}
getList()

function handleSearch() {
    tablePage.value.currentPage = 1
    getList()
}
function handleReset() {
    queryForm.value = {
        ...initialState,
    }
    tablePage.value.currentPage = 1
    tablePage.value.pageSize = 10
    getList()
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
    getList()
}

function toCreate() {
    detailId.value = ''
    detailData.value = {}
    isShowDialog.value = true
}
function toEdit(row) {
    detailId.value = row.id
    detailData.value = cloneDeep(row)
    isShowDialog.value = true
}
</script>

<template>
    <ElCard shadow="never"
            class="mb-20"
    >
        <el-form inline
                 class="search-form"
                 :model="queryForm"
                 @submit.prevent
        >
            <el-form-item label="群聊名称">
                <el-input v-model="queryForm.chatName"
                          clearable
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary"
                           @click="handleSearch"
                >
                    搜索
                </el-button>

                <el-button @click="handleReset">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </ElCard>

    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="tableData"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <el-button type="primary"
                           @click="toCreate"
                >
                    新建
                </el-button>
            </template>

            <template #qrcodePic="{ row }">
                <el-image v-if="row.chatImage"
                          class="w-50"
                          :src="row.chatImage"
                          :preview-src-list="[row.chatImage]"
                          fit="contain"
                />
            </template>

            <template #chatBg="{ row }">
                <el-image v-if="row.chatBgPic"
                          class="w-50"
                          :src="row.chatBgPic"
                          :preview-src-list="[row.chatBgPic]"
                          fit="contain"
                />
            </template>

            <!-- <template #status="{ row }">
                <el-tag v-if="row.isDeleted === 1"
                        type="info"
                >
                    弃用
                </el-tag>

                <el-tag v-else
                        type="success"
                >
                    正常
                </el-tag>
            </template> -->

            <template #operate="{ row }">
                <el-link type="primary"
                         :underline="false"
                         @click="toEdit(row)"
                >
                    编辑
                </el-link>
            </template>
        </SearchTable>
    </ElCard>

    <QrcodeDialog v-if="isShowDialog"
                  v-model:id="detailId"
                  v-model:visible="isShowDialog"
                  :data="detailData"
                  @success="getList"
    />
</template>

<style lang="less" scoped>
.search-form {
    :deep(.el-form-item) {
        width: 300px;
        margin-right: 20px;
        margin-bottom: 0;
    }
}
</style>
